<link rel="stylesheet" type="text/css" href="../css/ui/jquery.ui.all.css" />
<link rel="stylesheet" href="../css/ui/jquery.ui.datepicker.css" type="text/css" />
<link rel="stylesheet" href="../css/content.css" type="text/css" />
<script type="text/javascript" src="../js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">

	Ext.onReady(function(){
        $( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "../images/calendar.gif",
			buttonImageOnly: true,
			dateFormat: 'yy/mm/dd'		
		});
	});
	function limitText(limitField, limitCount, limitNum) {
		if (limitField.value.length > limitNum) {
			limitField.value = limitField.value.substring(0, limitNum);
		} else {
			limitCount.value = limitNum - limitField.value.length;
		}
	}
        var button1 = "bold,|,justifyleft,justifycenter,justifyright,|,fontsizeselect,|,link,unlink,";
        var button2 = "hr,|,forecolor,backcolor,|,";
        
        tinyMCE.init({
            // General options
            mode: "exact",
            elements: "info",
            theme: "advanced",
            plugins: "lists,pagebreak,style,layer,table,save,advimage,advhr,emotions,iespell,inlinepopups,insertdatetime,preview,searchreplace,contextmenu,paste,directionality,fullscreen,noneditable,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,ibrowser,template",
            
            // Theme options
            theme_advanced_buttons1: button1,
            theme_advanced_buttons2: button2,
            theme_advanced_buttons3: "",
            theme_advanced_buttons4: "",
            
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "none",
            theme_advanced_resizing: true,
            relative_urls: false,
            remove_script_host: false,
            
            // Example content CSS (should be your site CSS)
            content_css: "css/content.css",
            
            // for fullscreen in new window
            fullscreen_new_window: false,
            // Replace values for the template plugin
            template_replace_values: {
                username: "Some User",
                staffid: "991234"
            }
        });
</script>
	<div id="wrapper">
		<form id="form" method="POST" action="services/add_content.php" enctype="multipart/form-data">
			<fieldset>
				<legend>Form Content</legend>				
					<div id="listpage">
						<label for="group">Group</label>
						<select name="group" id="group">
							<option value="home">HOME</option>
							<option value="menu" >MENU</option>
							<option value="promotion" selected="selected" >PROMOTION</option>
							<option value="collection" >COLLECTION</option>
							<option value="contact">CONTACT</option>
						</select>
					</div>
                    <div>
                        <label for="date">Date</label>
                        <input id="datepicker" name="date" type="text" value="<?php echo date("Y/m/d"); ?>" readonly="true" />
                    </div>
                    					
					<div id="message">
						<label for="message">Content</label>
						<textarea name="info" cols="50" rows="10" id="info" 
						onKeyDown="limitText(this.form.info,this.form.countdown,300);"
						onKeyUp="limitText(this.form.info,this.form.countdown,300);" maxlength="300" ></textarea>

					</div>
					<div id="countdown">
						<font size="1">(Maximum characters: 300)<br>You have <input readonly type="text" name="countdown" size="3" value="300"> characters left.</font>
					</div>
					
					<div>
						<input type="submit" id="addcontent" name="submit" value="Add Content" class="button" />
			</fieldset>
		</form>
	</div><!--end wrapper-->
	

